<template>
        
		<div class="coinTradPage codsg">
			<div class="box_account">
				<div class="fColor2 ft12 ttBk pdlr20 pdtb20">
					<p class="mt10" style="font-size:14px">{{$t('fastExchange.title')}}<a target="_blank"></a></p>
					<p class="mt10">
						<font style="font-size:14px">{{$t('fastExchange.title1')}}</font>
					</p>
					<p class="mt10">
						<font style="font-size:14px">
								{{$t('fastExchange.content')}}
						</font>
					</p>
					<p class="mt10" style="font-size:14px">
						<font>
							{{$t('fastExchange.content1')}}
						</font> <br>
						<font>
							{{$t('fastExchange.content2')}}
						</font> <br>
						<font>
							{{$t('fastExchange.content3')}}
						</font>
						<br>
						<font>
							{{$t('fastExchange.content4')}}
						</font>
						<br>
						<font>
                            <a href="https://m.bitcan.co/static/VAC_Whitepaper.pdf" target="_blank">{{$t('fastExchange.content5')}}</a>
						</font> <br>
						
					</p>
					<p class="mt10">
						<font></font>
					</p>
				</div>
				<div class="contentBK">
					<ul>
						<li style="display:flex;border">
                            <div style="width:205px;" >
								<!-- <se-select v-model="type" @click="selectChange">
								
									<se-option value="USDT" >USDT_ERC20</se-option>
									<se-option value="BTC" >BTC</se-option>
									<se-option value="ETH" >ETH</se-option>	
								</se-select> -->
								
								<picker @change="selectChange" mode="selector" :value="index" :range="selectObj" :range-key="'name'">
									 <view >{{selectObj[index].name}}</view>  
								</picker>
								
                               <!-- <Select v-model="type" @click="selectChange">
                                   
                                </Select> -->
                                <p class="fColor2 mt20">{{$t('fastExchange.content10')}}：{{assets}}</p>
                            </div>
                            <div>
                                <input type="number"  v-model="number" @input="exchangeInput" :placeholder="$t('fastExchange.content9')" style="margin-left: 10px;border: 1px solid #42526a;" />
                            </div>                            
						</li>
						<li class="c_c76">
							<div>
								<p class="fColor2 mt20">{{$t('fastExchange.content6')}}</p>
								<div class="felxbetween pingsoer mt20 alcenter" style="display:flex;">
									<div class="pdlr10"
										style="border-right: 1px solid rgb(78, 91, 133); width: 162px;">VAC</div>
									<div class="w_68 pdlr10" style="width: 362px;">{{converNum}}</div>
								</div>
								<p class="fColor2 mt20">{{$t('fastExchange.content7')}}：1 {{type}}≈ {{wgp}}</p>
							</div>
						</li>
					</ul>
					<div class="mt20" style="display: flex;">
                         <button type="primary"  @click="exChange" style="width: 150px;line-height: 28px;font-size:16px;" >{{$t('fastExchange.content8')}}</Button>
						 <button type="primary"  @click="goExchange" style="width: 150px;line-height: 28px;font-size:16px;left: 20px;" >{{$t('fastExchange.content11')}}</Button>
					</div>
				</div>
			</div>
			　
		</div>
    
</template>
<style scoped lang="scss">

.select view{
	width: 30%;
	height: 60upx;
	margin-bottom: 20upx;
	text-align: center;
	margin: 10upx 10upx 20upx;
	/* color: #d7e8f5; */
	/* background: #0b1726; */
	display: flex;
	align-items: center;
	justify-content: center;
}
.select .active{
	background: none;
	border: 1px solid #217dc1;
	color: #217dc1;
	border-radius: 4upx;
}

.coinTradPage,.orderWrap{
    background-color: #161b25;
    font-size: 14px;
}
.box_account{
    background:#101334;
    width: 100%;
    margin: auto;
    height: 100%;
}

.fColor2{
    color:#637085
}

.ft12{
    font-size:12px
}

.ttBk{
    background-color:#101334
}

.pdtb20{
    padding:20px
}

.mt10{
    margin-top:10px
}

.contentBK{
    background-color:#101334;
    padding:20px
}


.c_c76{
    color:#c7cce6
}

.mt20{
    margin-top:20px
}

.flexEnd{
    display:-webkit-box;
    display:-ms-flexbox;
    display:flex;
    -webkit-box-pack:end;
    -ms-flex-pack:end;
    justify-content:flex-end
}

.pdlr10{
    padding-left:10px
}



</style>
<script>

export default {
    data() {
        let self = this;
        return {
            wgp:"",
            converNum:"",
            type:"USDT",
            assets:0,
            price:0,
            number:"",
            symbolePrice:0,
			selectObj:[
				{"code":"USDT","name":"USDT_ERC20"},
				{"code":"BTC","name":"BTC"},
				{"code":"ETH","name":"ETH"}
			],
			index:0
        }
    },
    computed: {
        isLogin: function () {
			var token = uni.getStorageSync('token');
			if(token){
				return true;
			}else{
				return false;
			}
        },
        lang: function () {
            return uni.getStorageSync('lang') || 'zh';
        }
    },
    watch: {
        
    },
    created: function () {
        //没登录情况下跳转
       if(!this.isLogin){
           this.init();
       }
       this.getWallet();
	   
	   uni.setNavigationBarTitle({
	   	title:this.$t('fastExchange').title2
	   })
    },
    mounted: function () {
        
    },
    methods: {
        getWallet() {
			console.log('asfaafsasffsaasfasfasf');
			this.$utils.initDataToken({ url: 'uc/asset/wallet/'+ this.type,data:{},type:'post' }, (res,msg) => {
				let resp = res;
				this.assets = (resp && resp.balance) || '';
			});
            this.getPrice();
        },
        getPrice() {
			this.$utils.initDataToken({ url: 'uc/asset/fastInfo/'+ this.type,data:{},type:'post' }, (res,msg) => {
				uni.stopPullDownRefresh()
				let resp = res;
				this.price = resp.price;
				this.symbolPrice = resp.symbolPrice;   
				 //换算汇率
				this.wgp = (this.symbolPrice / this.price).toFixed(8);
				this.converNum = (this.number * this.wgp).toFixed(8);
			});
        },
        selectChange(e){
			this.index = e.target.value
			this.type = this.selectObj[this.index].code;
            this.getWallet();
        },
        exChange(){
            if(this.assets < this.number){
                this.$utils.showLayer(this.$t('fastExchange.tips1'));
                return;
            }

            let r = /^[0-9]+\.?[0-9]{0,9}$/;　　//正数
            let flag = r.test(this.number);
            if(!flag){
                this.$utils.showLayer(this.$t('fastExchange.tips2'));
                return;
            }
			
			this.$utils.initDataToken({ url: 'uc/asset/fastInfo/exchange',data:{
					symbol:this.type,
                    amount:this.number,
					}}, (res,msg) => {
				// uni.stopPullDownRefresh()
				let resp = res;
				if(resp.code === 0){
					this.$utils.showLayer('success');
				    this.getWallet();
				}else{
					this.$utils.showLayer('fail');
				}
			});
        },
        init(){
           uni.reLaunch({
           	url: '/pages/mine/login'
           })
        },
        exchangeInput(){
            this.converNum = (this.number * this.wgp).toFixed(8);
        },
		goExchange(e){
			uni.navigateTo({
				url: '/pages/market/kline?symbol=VAC/USDT'
			})
        },
    }
};
</script>
